<template>
  <div class="container">
    <headerBar title="报表"  @changeLan="changeLan"></headerBar>
    <div class="all" :style="{paddingTop: pdt+'px'}">
      <div class="weui-search-bar" style="width: 100%">
        <div class="weui-search-bar__form">
          <div class="weui-search-bar__box">
            <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
            <input type="text" class="weui-search-bar__input" placeholder="输入供应商、库存单据编号查询" v-model="inputVal" :focus="inputShowed" @input="inputTyping" />
            <div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">
              <icon type="clear" size="14"></icon>
            </div>
          </div>
          <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">
            <icon class="weui-icon-search" type="search" size="14"></icon>
            <div class="weui-search-bar__text">搜索</div>
          </label>
        </div>
        <div class="weui-search-bar__cancel-btn" :hidden="!inputShowed" @click="hideInput">取消</div>
      </div>
      <div style="width: 100%;position: relative;">
        <scroll-view class="grid" scroll-x="true">
          <div class="col-1" v-for="(item, i) in List" :key="i">
            <div class="desc-wrap">
              <span class="icon-wrap"></span>
              <!--              <text class="txt">{{item.name}}</text>-->
              <div style="display: flex;flex-direction: column;">
                <div v-for="(item, ie) in item.name" :key="ie" >
                  {{item}}
                </div>
              </div>
            </div>
          </div>

        </scroll-view>
      </div>

    </div>
  </div>
</template>

<script>
import headerBar from '@/components/headerBar'
export default {
  components: {
    headerBar
  },
  onLoad () {
    this.pdt = this.globalData.CustomBar
  },
  methods: {
    changeLan (val) {
      this.local = val
    },
    showInput () {
      this.inputShowed = true
    },
    hideInput () {
      this.inputVal = ''
      this.inputShowed = false
    },
    clearInput () {
      this.inputVal = ''
    },
    inputTyping (e) {
      this.inputVal = e.mp.detail.value
    }
  },
  data () {
    return {
      pdt: 66,
      local: wx.getStorageSync('local'),
      inputShowed: false,
      inputVal: '',
      List: [{
        id: 1,
        name: ['状态', 1, 3, 4, 67, 8]
      }, {
        id: 2,
        name: ['收货时间', 1, 3, 4, 67, 8]
      }, {
        id: 3,
        name: ['供应商', 1, 3, 4, 67, 8]
      }, {
        id: 4,
        name: ['供应商信息', 1, 3, 4, 67, 8]
      }, {
        id: 5,
        name: ['接收号码', 1, 3, 4, 67, 8]
      }, {
        id: 6,
        name: ['过磅重量', 1, 3, 4, 67, 8]
      }, {
        id: 7,
        name: ['过磅总重（吨）', 1, 3, 4, 67, 8]
      }, {
        id: 8,
        name: ['卷轴/外框', 1, 3, 4, 67, 8]
      }, {
        id: 9,
        name: ['卷号', 1, 3, 4, 67, 8]
      }, {
        id: 10,
        name: ['序列号', 1, 3, 4, 67, 8]
      }]
    }
  },
  created () {
  }
}
</script>

<style scoped lang="scss">
  @import "index";
  .searchbar-result {
    margin-top: 0;
    font-size: 14px;
  }
  .searchbar-result:before {
    display: none;
  }
  .weui-cell {
    padding: 12px 15px 12px 35px;
  }
  .grid {
    height: 300rpx;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    margin-top: 7rpx;
    margin-bottom: 30rpx;
  }

  .grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }

  .col-1 {
    min-width: 140rpx;
    height: 300rpx;
    background-color: rgba(255, 255, 255, 1);
    /*border: 2rpx solid #eee;*/
    border-radius: 7rpx;
    padding: 0 10rpx;
    margin-right: 10rpx;
    box-sizing: border-box;
    white-space: normal;
    vertical-align: middle;
    display: inline-block;
  }

  .col-1:first-child {
    /*margin-left: 84rpx;*/
    position: fixed;
    left: 0;
  }

  .desc-wrap {
    min-width: 140rpx;
    height:300rpx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .icon-wrap {
    width: 31rpx;
    height: 31rpx;
    border-radius: 50%;
    //background-color: #2190EA;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  .icon-4 {
    //color: #fff;
    //font-size: 18rpx;
    line-height: 1;
  }

  .txt {
    font-size: 28rpx;
    color: rgba(0, 0, 0, 1);
    line-height: 60rpx;
    font-weight: 500;
    text-align: center;
    margin-left: 16rpx;
  }

</style>
